<!-- pages/error-collection/error-collection.vue -->
<template>
  <view class="error-collection-container">
    <!-- 顶部导航栏 -->
    <view class="custom-nav">
      <view class="back-button" @tap="goToMyPage">
        <text class="back-icon">←</text>
      </view>
      <text class="nav-title">错题集</text>
    </view>

    <!-- 统计概览卡片 -->
    <view class="overview-card">
      <view class="overview-title">错题统计概览</view>
      <view class="overview-data">
        <view class="data-item">
          <view class="data-value">{{ errorStats.totalErrors }}</view>
          <view class="data-label">累计错题</view>
        </view>
        <view class="data-item">
          <view class="data-value">{{ errorStats.reviewedCount }}</view>
          <view class="data-label">已复习</view>
        </view>
        <view class="data-value-circle">
          <view class="value-circle">
            <view class="circle-inner">
              <text class="circle-value">{{ errorStats.masteryRate }}%</text>
            </view>
          </view>
          <view class="circle-label">掌握率</view>
        </view>
      </view>
    </view>

    <!-- 学科筛选 -->
    <view class="filter-section">
      <scroll-view scroll-x class="subject-tabs">
        <view 
          v-for="(subject, index) in subjects" 
          :key="index"
          class="subject-tab"
          :class="{ active: currentSubject === subject.id }"
          @tap="selectSubject(subject.id)">
          {{ subject.name }}
        </view>
      </scroll-view>
    </view>

    <!-- 智能分析与建议 -->
    <view class="analysis-card" v-if="showAnalysis">
      <view class="card-header">
        <view class="card-title">智能分析</view>
        <view class="close-button" @tap="hideAnalysis">
          <text>×</text>
        </view>
      </view>
      <view class="analysis-content">
        <view class="analysis-item">
          <text class="analysis-icon">📊</text>
          <text class="analysis-text">你的{{ currentSubjectName }}错题主要集中在{{ analysisData.weakType }}类题型</text>
        </view>
        <view class="analysis-item">
          <text class="analysis-icon">🔍</text>
          <text class="analysis-text">建议重点复习《{{ analysisData.recommendChapter }}》章节</text>
        </view>
      </view>
      <view class="actions">
        <button class="action-button" @tap="createStudyPlan">生成学习计划</button>
      </view>
    </view>

    <!-- 错题列表 -->
    <view class="error-list">
      <view class="list-header">
        <text class="list-title">错题列表</text>
        <view class="list-actions">
          <view class="action-icon sort" @tap="toggleSortOptions">
            <text>🔃</text>
            <view class="sort-options" v-if="showSortOptions">
              <view class="sort-option" @tap.stop="sortBy('time')">按时间排序</view>
              <view class="sort-option" @tap.stop="sortBy('difficulty')">按难度排序</view>
              <view class="sort-option" @tap.stop="sortBy('frequency')">按错误次数</view>
            </view>
          </view>
          <view class="action-icon" @tap="showAnalysis = true">
            <text>📈</text>
          </view>
        </view>
      </view>

      <!-- 错题分组 -->
      <view class="error-group" v-for="(group, groupIndex) in errorGroups" :key="groupIndex">
        <view class="group-header" @tap="toggleGroup(groupIndex)">
          <text class="group-title">{{ group.title }}</text>
          <text class="group-count">{{ group.items.length }}题</text>
          <text class="group-toggle">{{ group.expanded ? '︿' : '﹀' }}</text>
        </view>
        <view class="group-content" v-if="group.expanded">
          <view 
            class="error-item"
            v-for="(item, itemIndex) in group.items"
            :key="itemIndex"
            @tap="viewErrorDetail(item)">
            <view class="error-info">
              <view class="question-type" :style="{ backgroundColor: getQuestionTypeColor(item.type) }">
                {{ item.type }}
              </view>
              <view class="question-title">{{ item.title }}</view>
            </view>
            <view class="error-meta">
              <view class="error-frequency">错误{{ item.errorCount }}次</view>
              <view class="error-status" :class="{ mastered: item.mastered }">
                {{ item.mastered ? '已掌握' : '未掌握' }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加错题的悬浮按钮 -->
    <view class="float-button" @tap="addNewError">
      <text class="float-button-icon">+</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 错题统计
const errorStats = ref({
  totalErrors: 186,
  reviewedCount: 143,
  masteryRate: 78
})

// 学科列表
const subjects = ref([
  { id: 'all', name: '全部' },
  { id: 'politics', name: '政治' },
  { id: 'english', name: '英语' },
  { id: 'math', name: '数学' },
  { id: 'professional', name: '专业课' }
])

// 当前选中的学科
const currentSubject = ref('all')

// 计算当前学科名称
const currentSubjectName = computed(() => {
  const subject = subjects.value.find(s => s.id === currentSubject.value)
  return subject ? subject.name : '全部'
})

// 智能分析数据
const analysisData = ref({
  weakType: '论述题',
  recommendChapter: '马克思主义基本原理'
})

// 是否显示分析面板
const showAnalysis = ref(false)

// 是否显示排序选项
const showSortOptions = ref(false)

// 错题分组数据
const errorGroups = ref([
  {
    title: '今日新增',
    expanded: true,
    items: [
      {
        id: '1',
        type: '选择题',
        title: '马克思主义中国化的第一个理论成果是（）',
        errorCount: 2,
        mastered: false
      },
      {
        id: '2',
        type: '多选题',
        title: '以下哪些是中国特色社会主义的本质特征（）',
        errorCount: 1,
        mastered: false
      }
    ]
  },
  {
    title: '本周错题',
    expanded: false,
    items: [
      {
        id: '3',
        type: '填空题',
        title: '邓小平理论的核心是___',
        errorCount: 3,
        mastered: true
      },
      {
        id: '4',
        type: '论述题',
        title: '试述改革开放以来中国共产党对建设中国特色社会主义认识的深化过程',
        errorCount: 2,
        mastered: false
      },
      {
        id: '5',
        type: '名词解释',
        title: '中国特色社会主义理论体系',
        errorCount: 1,
        mastered: true
      }
    ]
  },
  {
    title: '历史错题',
    expanded: false,
    items: [
      {
        id: '6',
        type: '选择题',
        title: '社会主义本质的内涵包括（）',
        errorCount: 4,
        mastered: true
      },
      {
        id: '7',
        type: '多选题',
        title: '中国特色社会主义制度的显著优势包括（）',
        errorCount: 2,
        mastered: true
      },
      {
        id: '8',
        type: '论述题',
        title: '简述中国共产党人"四个自信"的理论与实践依据',
        errorCount: 3,
        mastered: false
      }
    ]
  }
])

// 选择学科
const selectSubject = (subjectId) => {
  currentSubject.value = subjectId
  // 在实际项目中，这里可以根据学科ID筛选错题
}

// 隐藏分析面板
const hideAnalysis = () => {
  showAnalysis.value = false
}

// 生成学习计划
const createStudyPlan = () => {
  uni.navigateTo({
    url: '/pages/study-plan/study-plan',
    fail: () => {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  })
}

// 切换排序选项显示
const toggleSortOptions = () => {
  showSortOptions.value = !showSortOptions.value
}

// 排序方法
const sortBy = (type) => {
  showSortOptions.value = false
  // 在实际项目中，这里可以根据排序类型对错题进行排序
  uni.showToast({
    title: `已按${type === 'time' ? '时间' : type === 'difficulty' ? '难度' : '错误次数'}排序`,
    icon: 'none'
  })
}

// 切换分组展开状态
const toggleGroup = (index) => {
  errorGroups.value[index].expanded = !errorGroups.value[index].expanded
}

// 查看错题详情
const viewErrorDetail = (item) => {
  uni.navigateTo({
    url: `/pages/error-detail/error-detail?id=${item.id}`,
    fail: () => {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  })
}

// 添加新错题
const addNewError = () => {
  uni.navigateTo({
    url: '/pages/add-error/add-error',
    fail: () => {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  })
}

// 获取题型对应的颜色
const getQuestionTypeColor = (type) => {
  const colorMap = {
    '选择题': '#A8BF8F',
    '多选题': '#E8B0A2',
    '填空题': '#7C9ECE',
    '论述题': '#E6A5DC',
    '名词解释': '#94D0CC'
  }
  return colorMap[type] || '#A8BF8F'
}

// 返回我的页面
const goToMyPage = () => {
  uni.switchTab({
    url: '/pages/my/my'
  })
}

onMounted(() => {
  // 设置导航栏颜色
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#A8BF8F',
  })
})
</script>

<style>
.error-collection-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 50rpx; /* Reduced padding since we removed the bottom navbar */
}

/* 导航栏 */
.custom-nav {
  width: 100%;
  height: 100rpx;
  background-color: #A8BF8F;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.nav-title {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
}

.back-button {
  position: absolute;
  left: 20rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-button:active {
  opacity: 0.8;
}

.back-icon {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: bold;
}

/* 统计概览卡片 */
.overview-card {
  background-color: #A8BF8F;
  color: white;
  padding: 30rpx;
  border-radius: 0 0 30rpx 30rpx;
  margin-top: 100rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.overview-title {
  font-size: 32rpx;
  margin-bottom: 30rpx;
}

.overview-data {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.data-item {
  text-align: center;
}

.data-value {
  font-size: 44rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.data-label {
  font-size: 24rpx;
}

.data-value-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.value-circle {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.circle-inner {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-value {
  font-size: 32rpx;
  font-weight: bold;
}

.circle-label {
  font-size: 24rpx;
}

/* 学科筛选 */
.filter-section {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.subject-tabs {
  white-space: nowrap;
}

.subject-tab {
  display: inline-block;
  padding: 16rpx 30rpx;
  margin-right: 16rpx;
  border-radius: 30rpx;
  background-color: #f0f0f0;
  font-size: 28rpx;
  color: #666;
}

.subject-tab.active {
  background-color: #A8BF8F;
  color: #fff;
}

/* 分析卡片 */
.analysis-card {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-button {
  width: 50rpx;
  height: 50rpx;
  border-radius: 25rpx;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 36rpx;
}

.analysis-content {
  margin-bottom: 20rpx;
}

.analysis-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.analysis-icon {
  font-size: 36rpx;
  margin-right: 16rpx;
}

.analysis-text {
  font-size: 28rpx;
  color: #333;
}

.actions {
  display: flex;
  justify-content: flex-end;
}

.action-button {
  background-color: #A8BF8F;
  color: white;
  font-size: 28rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  line-height: 1.5;
}

/* 错题列表 */
.error-list {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.list-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.list-actions {
  display: flex;
  gap: 20rpx;
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.action-icon.sort {
  position: relative;
}

.sort-options {
  position: absolute;
  top: 70rpx;
  right: 0;
  width: 200rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
  z-index: 10;
}

.sort-option {
  padding: 20rpx;
  font-size: 26rpx;
  color: #333;
  border-bottom: 1rpx solid #f0f0f0;
}

.sort-option:last-child {
  border-bottom: none;
}

.sort-option:active {
  background-color: #f9f9f9;
}

/* 错题分组 */
.error-group {
  margin-bottom: 30rpx;
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.group-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.group-count {
  font-size: 26rpx;
  color: #999;
  margin: 0 20rpx;
}

.group-toggle {
  font-size: 32rpx;
  color: #999;
}

.group-content {
  padding: 20rpx 0;
}

.error-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.error-item:last-child {
  border-bottom: none;
}

.error-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.question-type {
  padding: 6rpx 16rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  color: white;
  margin-right: 16rpx;
  min-width: 80rpx;
  text-align: center;
}

.question-title {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.error-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.error-frequency {
  font-size: 24rpx;
  color: #999;
}

.error-status {
  font-size: 24rpx;
  color: #ff6b6b;
}

.error-status.mastered {
  color: #A8BF8F;
}

/* 悬浮按钮 */
.float-button {
  position: fixed;
  right: 40rpx;
  bottom: 120rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background-color: #A8BF8F;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.2);
  z-index: 99;
}

.float-button-icon {
  font-size: 50rpx;
  color: white;
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .filter-section,
  .analysis-card,
  .error-list {
    background-color: #1c1c1e;
  }
  
  .card-title,
  .list-title,
  .group-title,
  .question-title,
  .analysis-text {
    color: #ffffff;
  }
  
  .subject-tab {
    background-color: #2c2c2e;
    color: #8e8e93;
  }
  
  .error-item,
  .group-header {
    border-bottom-color: #2c2c2e;
  }
  
  .close-button,
  .action-icon {
    background-color: #2c2c2e;
    color: #8e8e93;
  }
  
  .sort-options {
    background-color: #2c2c2e;
  }
  
  .sort-option {
    color: #ffffff;
    border-bottom-color: #3c3c3e;
  }
  
  .sort-option:active {
    background-color: #3c3c3e;
  }
}
</style>